import { ElMessage, ElNotification, ElMessageBox } from "element-plus";
import { ref } from "vue";

// 提示类型hooks
export type ToastType = "success" | "error" | "warning" | "info";
export enum PositionType {
  tl = "top-left",
  tr = "top-right",
  bl = "bottom-left",
  br = "bottom-right",
}
export function useMessage() {
  // 轻提示hooks Toast
  const Toast = (
    Message: string,
    Type: ToastType,
    duration = 1000,
    offset = 80,
    plain = true
  ) => {
    ElMessage({
      message: `<strong>${Message}</strong>`,
      type: Type,
      plain,
      center: true,
      dangerouslyUseHTMLString: true,
      duration,
      offset,
    });
  };
  // 通知hooks Notice
  /**
   * 通过枚举定义了PositionType，每次使用可以先解构出来。使用如下：
   * const { topLeft, topRight, bottomLeft, bottomRight } = PositionType;
   * Notice("Title", "message.", "warning", bottomLeft);
   */
  const Notice = (
    title: string,
    message: string,
    type: ToastType,
    position: PositionType = PositionType.tl // 设置默认值
    // 可选参数
  ) => {
    ElNotification({
      title,
      message,
      type,
      position,
    });
  };
  return { Toast, Notice };
}
// 对话框hooks
export interface DialogOptions {
  title: string;
  message: string;
  width?: string;
  confirmButtonText?: string;
  cancelButtonText?: string;
}

export function useDialog(options: DialogOptions) {
  /**
   * 使用示例：
    <el-dialog
      v-model="dialogVisible"
      :title="options.title"
      :width="options.width"
    >
    const options = ref({
      title: "Tips",
      message: "This is a message",
      width: "500px",
      confirmButtonText: "Confirm",
      cancelButtonText: "Cancel",
    });
    const { dialogVisible } = useDialog( options.value );
   */
  const dialogVisible = ref(false);
  // 打开对话框
  const openDialog = () => {
    dialogVisible.value = true;
  };
  // 关闭对话框
  const closeDialog = () => {
    dialogVisible.value = false;
  };
  // 确认关闭对话框
  const handleClose = (done: () => void) => {
    ElMessageBox.confirm(options.message, options.title, {
      confirmButtonText: options.confirmButtonText || "Confirm",
      cancelButtonText: options.cancelButtonText || "Cancel",
      type: "warning",
    })
      .then(() => {
        done();
      })
      .catch(() => {
        // catch error
      });
  };
  return {
    dialogVisible,
    openDialog,
    closeDialog,
    handleClose,
  };
}
